<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <meta name=viewport content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="/common/index.css">
    <script src="/common/index.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/layer/2.3/layer.js"></script>
</head>
<body>
<div id="id-app" v-cloak>
    <el-tabs type="border-card" :stretch="true" v-model="navSelect">
        <el-tab-pane label="本日订单" name="today">
            <el-row>
                <el-col :span="24" v-if="canSubimt==false">
                    <h1 class="fs20 ml10">日期：{{todayDate}}</h1>
                </el-col>
                <el-col :span="24" v-if="canSubimt==true">
                    <el-col :span="10">
                        <p class="hint">点击菜名可查看图片</p>
                    </el-col>
                    <el-col :span="14">
                        <el-col :span="12">
                        <!--<el-button type="warning" @click="loginOutOut()" icon="el-icon-error" size="small">退出登陆</el-button>-->
                        </el-col>
                        <el-col :span="12">
                        <el-button type="primary" @click="dialogVisible = true" icon="el-icon-circle-plus" size="small">管理菜品</el-button>
                        </el-col>
                    </el-col>
                    
                    <el-dialog title="选择菜品" :visible.sync="dialogVisible" width="100%">
                        <el-row>
                            <el-col :span="10">
                                <el-input v-model="keyword" placeholder="搜索菜品名称"></el-input>
                            </el-col>
                            <el-col :span="8">
                                <el-select v-model="itemType">
                                    <el-option label="全部类别" value="0"></el-option>
                                    <el-option v-for="type in itemTypeList" :key="type.item_type_name" :label="type.item_type_name" :value="type.item_type_id"></el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="4" v-if="keyword">
                                <el-button @click="keyword=''">取消搜索</el-button>
                            </el-col>
                        </el-row>
                        <template>
                            <el-table @row-click="choose" :data="itemList" style="width: 100%" :row-class-name="tableRowClassName">
                                <el-table-column label="图片" align="center">
                                    <template slot-scope="scope">
                                        <img @click="showImage(scope.row.item_image,scope.row.item_name)" class="imageRad" :src="'/Public/images/'+scope.row.item_image_small" alt="">
                                    </template>
                                </el-table-column>
                                
                                <el-table-column label="品名" align="center">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.item_name }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="unit_name" label="单位"></el-table-column>
                                <el-table-column label="是否选择">
                                    <template slot-scope="scope">
                                        <i v-if="scope.row.check==true" class="el-icon-success darkBlue fs16"></i>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                        
                    </el-dialog>
                
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <div class="item-content wFull">
                        <div class="item displayF fs16 fwBlod">
                            <div class="flex2 tac">菜品</div>
                            <div class="flex2 tac">数量</div>
                            <div class="flex1 tac">单位</div>
                            <div class="flex1 tac">操作</div>
                        </div>
                        <div class="item displayF fs16 " v-for="(item,k) in selectItem">
                            <div class="flex2 tac" @click="showImage(item.item_image,item.item_name)">{{item.item_name}}</div>
                            <div class="flex2 tac">
                                <el-input-number v-if="canSubimt==true" v-model="item.number" size="mini"  :controls="false" :precision="0"></el-input-number>
                                <!--<el-input v-if="canSubimt==true" size="medium" v-model="item.number"></el-input>-->
                                <span v-if="canSubimt==false">{{item.number}}</span>
                            </div>
                            <div class="flex1 tac fs12">{{item.unit_name}}</div>
                            <div class="flex1 tac">
                                <i v-if="canSubimt" @click="delItem(k)" class="el-icon-remove fs20 red"></i>
                            </div>
                        </div>
                    </div>
                    <div class="commBtn mAuto borderRadius" v-if="canSubimt" @click="fromSubmit()">
                        <span class="fs14">提交（每天{{begantime}}-{{endtime}}点提交当天菜品）</span>
                    </div>
                    <div v-if="canSubimt==false" class="commBtn mAuto mt20 borderRadius bgGery">
                        <span class="fs14">不能提交订单，请在{{begantime}}-{{endtime}}内提交</span>
                    </div>
                </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="历史订单" name="history">
            
            <div class="block">
                <span class="demonstration fs14">月份：</span>
                <el-date-picker v-model="month" type="month" placeholder="选择月份"></el-date-picker>
            </div>
            <div class="item-content wFull">
                <div class="item displayF fs16 fwBlod">
                    <div class="flex2 tac">下单日期</div>
                    <div class="flex1 tac">金额</div>
                    <div class="flex1 tac">查看详情</div>
                </div>
                <div class="item displayF fs16 " v-for="(order,k) in orderDayList">
                    <div class="flex2 tac">
                        <i class="el-icon-date fs16 darkBlue"></i>
                        {{k}}
                    </div>
                    <div class="flex1 tac">{{order.total}}</div>
                    <div class="flex1 tac fs12">
                        <el-button type="primary" @click="showOrderDetail(k)" icon="el-icon-tickets" size="small">查看详情</el-button>
                    </div>
                </div>
                <el-dialog :fullscreen="true" title="订单详情" :visible.sync="orderDialogVisible" width="100%">
                    <span>订单日期：{{order_date}}</span><br>
                    <span>{{canteen_name}}-{{window_name}}</span>
                    <template>
                        <el-table @row-click="choose" :data="orderItemList" style="width: 100%">
                            <el-table-column label="品名" prop="item_name"></el-table-column>
                            <el-table-column prop="number" label="数量"></el-table-column>
                            <el-table-column prop="pre_price" label="单价"></el-table-column>
                            <el-table-column prop="unit_name" label="单位"></el-table-column>
                        </el-table>
                    </template>
                    <span slot="footer" class="dialog-footer dialog-footerFixed">
                            <el-button type="primary" @click="orderDialogVisible = false">关闭</el-button>
                        </span>
                </el-dialog>
            </div>
        </el-tab-pane>
    </el-tabs>
    <el-dialog :title="imageTital" :visible.sync="imgD" width="90%">
        <img class="wFull" :src="imagePath" alt="">
        <span slot="footer" class="dialog-footer">
  </span>
    </el-dialog>
</div>

<script>
    var member = new Vue({
        el: '#id-app',
        data: {
            keyword: null,
            hotList: Array(),
            selectItem: Array(),
            itemList: Array(),
            templist: Array(),
            orderDayList: Array(),
            orderItemList: Array(),
            itemTypeList: Array(),
            preKeyword: '',
            month: new Date(),
            dialogVisible: false,
            orderDialogVisible: false,
            imgD: false,
            window_name: null,
            canteen_name: null,
            order_date: null,
            canSubimt: false,
            todayDate: null,
            navSelect: 'today',
            begantime: '',
            endtime: '',
            imagePath: null,
            imageTital: null,
            itemType: "0"

        },
        methods: {
            tableRowClassName(row, b) {
                if (this.itemType == 0) {

                } else if (row.row.item_type_id != this.itemType) {
                    return 'hide'
                }
            },
            showImage(imagePath, imageTital) {
                this.imageTital = imageTital
                this.imagePath = '/Public/images/' + imagePath
                this.imgD = true
            },
            getOrderDayList() {
                var _this = this
                var res = AjaxGet('/Home/Index/getOrderDayList', {
                    memberID: localStorage.getItem("memberID"),
                    month: _this.month.getFullYear() + "-" + Number(_this.month.getMonth() + 1),
                })
                this.orderDayList = res.data
            },
            showOrderDetail(k) {
                var _this = this
                var res = AjaxGet('/Home/Index/getOrderInfo', {
                    memberID: localStorage.getItem("memberID"),
                    month: k,
                })
                this.orderItemList = res.data
                this.orderDialogVisible = true
                this.window_name = res.data[0].window_name
                this.canteen_name = res.data[0].canteen_name
                this.order_date = k
            },
            delItem(k) {

                var _this = this
                var temItem = {}
                this.selectItem = this.selectItem.filter(function (item, index, array) {
                    if (k == index) {
                        temItem = item
                        return false
                    } else {
                        return true
                    }
                })
                this.itemList.forEach(function (item, index) {
                    if (item.item_name == temItem.item_name) {
                        _this.itemList[index].check = false
                    }
                })
                console.dir(temItem)

            },
            searching() {

            },
            getTodayOrder() {
                var _this = this
                var res = AjaxGet('/Home/Index/getOrderItemList', {
                    memberID: localStorage.getItem('memberID')
                })
                if (res.status == true) {
                    this.selectItem = res.data
                    this.selectItem.forEach(function (a, b) {
                        _this.itemList[a.item_id - 1].check = true
                    })
                    this.selectItem.forEach(function (a,b) {
                        if(a.number==0){
                            _this.selectItem[b].number = undefined
                        }
                        
                    })
                } else {
                    this.selectItem = Array()
                }
            },
            discanSubimt() {
                var res = AjaxGet('/Home/Index/canSubmit/', {})
                this.canSubimt = res.data.canSubmit
                this.begantime = res.data.begantime
                this.endtime = res.data.endtime
            },
            fromSubmit() {
                var _this = this
                if (_this.selectItem.length == 0) {
                    alert("未选择菜品")
                    return false
                }
                var res = AjaxPost('/Home/Index/SaveOrder/', {
                    memberID: localStorage.getItem('memberID'),
                    selectItem: _this.selectItem
                })
                if (res.status == true) {
                    alert("保存成功")
                    window.location.reload()
                } else {
                    alert(res.message)
                }
            },
            getItemList() {
                var data = AjaxGet('/Home/Index/getItemList', {})
                this.itemList = data.data
                this.hotList = data.data
            },
            choose(a, b, c, d) {
                if (this.keyword == null && this.keyword == "") {
                    if (a.check == true) {
                        this.selectItem = this.selectItem.filter(function (item, index, array) {
                            if (a.index == item.index) {
                                return false
                            } else {
                                return true
                            }
                        })
                    } else {
                        var temp = a
                        temp.number = undefined
                        temp.memo = ''
                        this.selectItem.push(a)
                    }
                    this.itemList[a.item_id - 1].check = !this.itemList[a.item_id - 1].check
                } else {
                    if (a.check == true) {
                        this.selectItem = this.selectItem.filter(function (item, index, array) {
                            if (a.index == item.index) {
                                return false
                            } else {
                                return true
                            }
                        })
                    } else {
                        var temp = a
                        temp.number = undefined
                        temp.memo = ''
                        this.selectItem.push(a)
                    }
                    var _this = this
                    this.itemList.forEach(function (item, index) {
                        if (item.index == a.index) {
                            _this.itemList[index].check = !a.check
                        }
                    })

                }


            },
            handleClose() {

            },
            loginOutOut() {
                this.$confirm('是否确定退出登陆？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
              
                    localStorage.clear()
                    window.location.reload()
                }).catch(() => {
                });
           
            },
            getItemTypeList() {
                var data = AjaxGet('/Home/Index/getItemTypeList/')
                this.itemTypeList = data.data

            },
            filterss(a, b, c) {
                p(a)
                p(b)
                p(c)
            },
        },
        watch: {
            keyword(kw) {
                if (kw == null || kw == "") {
                    var _this = this
                    this.itemList.filter(function (item, index, array) {
                        _this.templist[item.index - 1].check = item.check
                    })
                    this.itemList = this.templist
                } else {
                    if (this.preKeyword == '') {
                        this.templist = this.itemList
                    }
                    this.itemList = this.itemList.filter(function (item, index, array) {
                        if (item.item_name.indexOf(kw) >= 0) {
                            return true
                        } else {
                            return false
                        }
                    })
                    this.preKeyword = kw
                }
            },
            month() {
                this.getOrderDayList()
            },

        },
        mounted() {
            if (checkLogin() == false) {
                window.location.href = 'index.php'
            }
            this.discanSubimt()
            this.getItemList()
            this.getItemTypeList()
            this.getTodayOrder()
            this.getOrderDayList()
            this.todayDate = new Date().getFullYear() + "-" + Number(new Date().getMonth() + 1) + "-" + Number(new Date().getDate() + 1)
            if (getUrlParamValue('h') == 1) {
                this.navSelect = 'history'
            }
        }
    })
</script>
</body>
</html>